<?php 
	$model_place = new Model_Place_Place();
	$data = $model_place->getAll();
	if(count($data)>0)
	{
		$first_data = $data[0];
?>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC7853_ui78J3S5hcHfGVVduDX-RIyGdlo&sensor=false"></script>
<script>
$(document).ready(function(){
	
	var myCenter=new google.maps.LatLng(<?php echo $first_data['latlngx'];?>,<?php echo $first_data['latlngy'];?>);
	
	function initialize()
	{
		var mapProp = {
		  center:myCenter,
		  zoom:<?php echo $first_data['zoom'];?>,
		  mapTypeId:google.maps.MapTypeId.ROADMAP
		};
		var map=new google.maps.Map(document.getElementById("maps"),mapProp);
		var marker=new google.maps.Marker({
		  position:myCenter,
		});
		
		marker.setMap(map);
		
		$(".place_item").click(function() {
			$(".place_item").removeClass('active');
		 moveBus( map, marker,$(this).attr("latlngx"),$(this).attr("latlngy"),$(this).attr("mzoom"));
		 $(this).addClass('active');
		});
		$("#place_item_1").addClass('active');
		
		 
	}	
	
	google.maps.event.addDomListener(window, 'load', initialize);
	
    
});
function moveBus( map, marker, latlngx, latlngy,mzoom ) {

    marker.setPosition( new google.maps.LatLng( latlngx, latlngy ) );
    var bounds =  new google.maps.LatLng(latlngx, latlngy);
    var mapProp = {
  		  center:bounds,
  		  zoom:parseInt(mzoom),
  		  mapTypeId:google.maps.MapTypeId.ROADMAP
  		};
    map.setOptions(mapProp);
};
</script>
<div class="main product_page">
	<div class="container">
		<div class="place">
			<h4>Hệ thống cửa hàng</h4>
			<div id="place_items">
				<?php 
					foreach($data as $item)
					{
				?>
				<div id="place_item_<?php echo $item['id'];?>" class="place_item" latlngx="<?php echo $item['latlngx'];?>" latlngy="<?php echo $item['latlngy'];?>" mzoom="<?php echo $item['zoom'];?>">
					<h3><?php echo $item['name'];?></h3>
					<p class="place_address">Địa chỉ: <?php echo $item['address'];?></p>
					<p class="place_phone">Số điện thoại: <?php echo $item['phone'];?></p>
				</div>
				<?php 
					}
				?>
			</div>
			<div id="maps" style="width:500px;height:380px;">
			
			</div>
		</div>
		<!-- end place-->
	</div>
	<div class="clear"></div>
	<?php $this->LoadBlock('BottomMenu');?>
</div>
<!-- end main-->
<?php } ?>
